import { Table, Divider, Input, InputNumber, Popconfirm, Form, message, Modal,Button } from 'antd';
import { connect } from "dva";
import {useState,useEffect} from 'react';
import styles from './userList.css';
import { createStore, combineReducers } from "redux";
const { Search } = Input;
import Link from 'umi/link';

function UserList(props) {
	window.scrollTo(0,0)
	const [visible,setVisible] = useState(false)
	const [coss,setCoss] = useState(0)
	let value1 ="";
	let value2 ="";
	let value3 ="";
	const handleCancel=()=>{
		setVisible(false)
		props.history.go(0)
	}			
	useEffect(()=>{
		console.log(props)
		const fetchData = async () =>props.dispatch(
			{
				type:'info/getuserData',
				payload:{
					pre:10,
					page:1,
					userName:'',
					nickName:''
				}
			},
		)
		fetchData();
	},[coss])
	const data = []
	console.log(props.pages)
	console.log(props.count)
	for (let i = 0; i < props.pages; i++) {
		props.list.map((item)=>data.push({
			index: i,
			key: item._id,
			userName: item.userName,
			nickName:item.nickName,
			updatedAt: item.updatedAt,
		}))
	}
	console.log(data)
	
	const edit=(id)=>{
		console.log(id)
		props.dispatch({
			type:'info/getUserInfo',
			payload:{
				id:id
			}
		}).then(()=>{
			setVisible(true)
		})
	}
	
	const columns = [
	  {
	    title: '用户名',
	    dataIndex: 'userName',
	  },
	  {
	    title: '昵称',
	    dataIndex: 'nickName',
	  },
	  {
	    title: '注册时间',
	    dataIndex: 'updatedAt',
	  },
	  {
	    title: '操作',
	    dataIndex: 'action',
		render: (text,record) => (
		  <span>
		    <a onClick={()=>edit(record.key)}>修改</a>
		    <Divider type="vertical" />
		    <a onClick={()=>props.dispatch({
				type:'info/deleteUser',
				payload:{
					id:record.key
				}
				}).then(()=>{
					message.success('删除成功~');
					setCoss(() => {
					    return (coss+1);
					  })
				})
			}>删除</a>
		  </span>
		),
	  },
	];
	
	const total={
	  columns:columns,
	  dataSource: data,
	  pagination: {
	    pageSize:10,
	    current: props.current,
	    total:props.count,
	    onChange: (page) => props.dispatch(
			{
				type:'info/getuserData',
				payload:{
					pre:10,
					page,
					userName:'',
					nickName:''
				}
			},
		) 
	  }
	}
	
	const search=value=>{
		if(value!=''){
			props.history.push({pathname:'/home/searchUsers',query:{id:value}})
			console.log(value)
		}
	}
	
	
  return (
	<div className={styles.normal}>
		<h1 style={{position:'relative'}}>用户列表<Link to="/home/addUser"><Button type='primary' style={{position:'absolute',right:0,top:10,lineHeight:1}}>新增用户</Button></Link></h1>
		<Search placeholder="请输入用户名称" onSearch={value =>search(value)} enterButton />
		<Table {...total} />
		<Modal
		    title="修改"
		    visible={visible}
		    onOk={()=>props.dispatch({
				type:'info/editUser',
				payload:{
					id:props.id,
					userName:value1.state.value,
					nickName:value2.state.value,
					avatar:value3.state.value
				}
			}).then(()=>{
				setVisible(false)
				if(props.id){
					message.success('修改成功~')
					setCoss(() => {
						return (coss+1);
					})
					setTimeout(function() {
						props.history.go(0)
					},0);
				}
			})}
		    onCancel={handleCancel}
			okText="确认"
			cancelText="取消"
		>
		    用户名:<Input defaultValue={props.userName} type="text" style={{height:40,margin:10}} ref={(val) =>value1 = val} />
		    昵称:<Input defaultValue={props.nickName} type="text" style={{height:40,margin:10}} ref={(val) =>value2 = val} />
		    头像:<Input defaultValue={props.avatar} type="text" style={{height:40,margin:10}} ref={(val) =>value3 = val} />
		</Modal>
	</div>
  )
}

export default connect(state=>state.info)(UserList)
